<script setup>
import { defineComponent, ref } from "vue";
import Button from "@/components/Button.vue";
import { ElButton, ElInput, ElSelect, ElOption } from "element-plus";
import { h } from "vue";
// 组件映射关系
const comMap = {
  button: ElButton,
  input: ElInput,
  select: ElSelect,
  option: ElOption,
};

const form = reactive({
  inputValue: "",
  selectValue: "",
});

console.log("刷新组件");
const inputChange = (val) => {
  form.inputValue = val;
  console.log(val);
};
const list = [
  {
    component: "button",
    text: "确定",
    type: "primary",
    onClick: () => {
      console.log("确定");
    },
  },
  {
    component: "input",
    placeholder: "请输入",
    modelValue: form.inputValue,
    "onUpdate:modelValue": inputChange,
  },
  {
    component: "select",
    placeholder: "请选择",
    value: "1",
    options: [
      {
        label: "选项",
        value: "1",
      },
    ],
  },
];

const nodeArr = computed(() => [
  {
    name: "button",
    component: ElButton,
    text: "确定",
    props: {
      type: "danger",
      plain: true,
      onClick: () => {
        console.log(form.inputValue);
      },
    },
  },
  {
    name: "input",
    component: ElInput,
    text: "占位",

    props: {
      placeholder: "请输入内容",
      style: { width: "200px" },
      modelValue: form.inputValue,
      // type: 'textarea',
      "onUpdate:modelValue": inputChange,
    },
  },
  {
    name: "select",
    component: ElSelect,
    // text:'占位',
    props: {
      placeholder: "请选择",
      modelValue: form.selectValue,
      onChange: (val) => {
        form.selectValue = val;
        console.log(val, "选择");
      },
    },
    children: [
      {
        name: "option",
        component: ElOption,
        props: {
          label: "选项",
          value: "1",
        },
      },
      {
        name: "option",
        component: ElOption,
        props: {
          label: "选项2",
          value: "2",
        },
      },
    ],
  },
  // {
  //   name: 'div',
  //   component: 'div',
  //   text: '占位',
  //   props: {
  //     // innerText: '按钮',
  //     type: 'primary'
  //   },
  //   children: [
  //     {
  //       component: 'div',
  //       text: '第二层',
  //       children: [
  //         {
  //           name: 'button22',
  //           component: ElButton,
  //           text: '按钮',
  //           props: {
  //             type: 'danger',
  //             plain: true,
  //             onClick: () => {
  //               console.log(inputValue.value)
  //             }
  //           }
  //         }
  //       ]
  //     },
  //     {
  //       name: 'button22',
  //       component: ElButton,
  //       text: '按钮22',
  //       props: {
  //         type: 'danger',
  //         plain: true,
  //         onClick: () => {
  //           console.log(inputValue.value)
  //         }
  //       }
  //     }
  //   ]
  // }
]);

function renderChildren(children) {
  return children.map((i) => {
    // 递归调用以处理可能的子子节点
    const childTextOrChildren = i.text
      ? [i.text]
      : i.children
      ? renderChildren(i.children)
      : [];
    return h(i.component, i.props, childTextOrChildren);
  });
}

const vnode = computed(() => {
  // const node = nodeArr.value.map(item => {
  //   return h(item.component, item.props, [
  //     item.text,
  //     item?.children?.map(i => h(i.component, i?.props, i?.text))
  //   ])
  // })
  const node = nodeArr.value.map((item) => {
    // 处理 item.text 作为单独的子节点
    const textNode = item.text ? [item.text] : [];

    // 递归地处理 item.children
    const childrenNodes =
      item.children?.map((i) => {
        // 假设 i.children 也需要被递归处理
        const childTextOrChildren = i.text
          ? [i.text]
          : i.children
          ? renderChildren(i.children)
          : [];
        return h(i.component, i.props, () => childTextOrChildren);
      }) || []; // 如果没有 children，则默认为空数组

    // 合并 textNode 和 childrenNodes
    const allChildren = [...textNode, ...childrenNodes];

    // 使用所有子节点创建新的节点
    return h(item.component, item.props, () => allChildren);
  });

  return h(
    "div", // type
    { class: "example" }, // props
    [
      /* children */
      node,
    ]
  );
});
</script>

<template>
  <div v-if="vnode">
    <component :is="vnode"></component>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-button) {
  width: 120px;
}
.example {
  padding: 10px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>
